<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="width: 100%;">
    <div class="layui-row">
        <div class="layui-col-md4" style="">
            <div id="e1" style="height: 333px;"></div>
        </div>
        <div class="layui-col-md4" style="">
            <div id="e2" style="height: 333px;"></div>
        </div>
        <div class="layui-col-md4" style="">
            <div id="e3" style="height: 333px;"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="" style="height:44px"></div>
    </div>
    <div class="layui-row" style="">
        <div class="layui-col-md6" id="e6" style="height: 400px;"></div>
        <div class="layui-col-md6" id="e7" style="height: 400px;"></div>
    </div>
    <div class="layui-row">
        <div class="" style="height:44px"></div>
    </div>
    <div class="layui-row">
        <div class="" id="e5" style="width: 100%;height: 400px;"></div>
    </div>
    <div class="layui-row" style="display: none">
        <div class="" id="e4" style="width: 100%;height: 400px;"></div>
    </div>
    <div class="layui-row" style="">
        <div class="layui-col-md6" id="e8" style="height: 444px;"></div>
        <div class="layui-col-md6" id="e9" style="height: 444px;"></div>
    </div>


</div>
</body>
<script type="text/javascript" src="../static/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../static/layui/layui.all.js"></script>
<script type="text/javascript" src="../static/echarts/echarts5.0.2.js"></script>
<script type="text/javascript">
    const myChart1 = echarts.init($("#e1")[0]);
    const myChart2 = echarts.init($("#e2")[0]);
    const myChart3 = echarts.init($("#e3")[0]);

    const option1 = {
        title: {
            text: "地区美食数量分布统计",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        series: [{
            type: 'pie',
            data: []
        }]
    };

    const option2 = {
        title: {
            text: "美食类型统计分析",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        series: [{
            type: 'pie',
            data: []
        }]
    };

    const option3 = {
        title: {
            text: "api数据数量统计",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        series: [{
            type: 'pie',
            data: []
        }]
    };

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie1",
        success: function (res) {
            console.log(res);
            option1.series[0].data = res;
            myChart1.setOption(option1);
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie2",
        success: function (res) {
            console.log(res);
            option2.series[0].data = res;
            myChart2.setOption(option2);
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie3",
        success: function (res) {
            console.log(res);
            option3.series[0].data = res;
            myChart3.setOption(option3);
        }
    });


    const myChart4 = echarts.init($("#e4")[0]);
    const myChart5 = echarts.init($("#e5")[0]);

    const option4 = {
        title: {
            text: "地区美食类型数量详细统计"
        },
        tooltip: {},
        xAxis: {
            type: "time"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', 'value'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar'
        }]
    };

    const option5 = {
        title: {
            text: "地区美食类型数量统计"
        },
        tooltip: {},
        xAxis: {
            type: "category"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', '中餐厅', '休闲餐饮场所', '其他', '冷饮店', '咖啡厅',
                '外国餐厅', '快餐厅', '甜品店', '糕饼店', '茶艺馆', '餐饮相关场所'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}

        ]
    };

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodBar1",
        success: function (res) {
            console.log(res);
            option4.dataset.source = res;
            myChart4.setOption(option4);
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodBar2",
        success: function (res) {
            console.log(res);
            const arr = [];
            let obj = {
                name: "",
                中餐厅: 0,
                休闲餐饮场所: 0,
                冷饮店: 0,
                咖啡厅: 0,
                外国餐厅: 0,
                快餐厅: 0,
                甜品店: 0,
                糕饼店: 0,
                茶艺馆: 0,
                餐饮相关场所: 0,
                其他: 0,
            };
            //转换参数
            let oldName = "";
            for (let i = 0; i < res.length; i++) {
                const tmp = res[i];
                if (tmp.name === oldName) {
                    obj[tmp.type] = tmp.value;
                } else {
                    if (oldName !== "") {
                        arr.push(obj);
                    }
                    oldName = tmp.name;
                    obj = {
                        name: oldName,
                        中餐厅: 0,
                        休闲餐饮场所: 0,
                        冷饮店: 0,
                        咖啡厅: 0,
                        外国餐厅: 0,
                        快餐厅: 0,
                        甜品店: 0,
                        糕饼店: 0,
                        茶艺馆: 0,
                        餐饮相关场所: 0,
                        其他: 0,
                    };
                }
            }
            console.log(arr);
            option5.dataset.source = arr;
            myChart5.setOption(option5);

        }
    });

    const myChart6 = echarts.init($("#e6")[0]);
    const myChart7 = echarts.init($("#e7")[0]);

    const option6 = {
        title: {
            text: "地区美食消费统计",
            left: "40"
        },
        tooltip: {},
        axisPointer: {
            show: true
        },
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        xAxis: {
            type: "category"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', 'value'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar'
        }]
    };
    const option7 = {
        title: {
            text: "地区美食评分统计（满分5分）",
            left: "40"
        },
        tooltip: {},
        axisPointer: {
            show: true
        },
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        xAxis: {
            type: "category"
        },
        yAxis: {},
        dataset: {
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar'
        }]
    };
    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie4",
        success: function (res) {
            console.log(res);
            option6.dataset.source = res;
            myChart6.setOption(option6);
        }
    });
    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie4",
        success: function (res) {
            console.log(res);
            option7.dataset.source = res;
            myChart7.setOption(option7);
        }
    });

    const myChart8 = echarts.init($("#e8")[0]);
    const myChart9 = echarts.init($("#e9")[0]);

    const option8 = {
        title: {
            text: "地区美食消费详细统计（单位：元）",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        series: [{
            type: 'sunburst',
            data: [],
            radius: ['0%', '95%'],
            label: {
                minAngle: 5
            }
        }]
    };

    const option9 = {
        title: {
            text: "地区美食评分详细统计（满分：5分）",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10,
            show: false
        },
        series: [{
            type: 'sunburst',
            data: [],
            radius: ['0%', '95%'],
            label: {
                minAngle: 5
            }
        }]
    };


    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodSun1",
        success: function (res) {
            console.log(res);
            option8.series[0].data = res;
            myChart8.setOption(option8);
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodSun2",
        success: function (res) {
            console.log(res);
            option9.series[0].data = res;
            myChart9.setOption(option9);
        }
    });


</script>
</html>